<template>
  <div class="product">
      <!-- 搜索 -->
      <div class="search">
         <template>
				<el-select v-model="searchValue"
					filterable
					clearable
					remote
					@change="searchTextChange"
					reserve-keyword
					@clear="clear"
					placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
					:remote-method="remoteMethod"
					:loading="loading">
					<el-option v-for="item in searchList"
						:key="item.sId"
						:label="item.name"
						:value="item.name">
					</el-option>
				</el-select>
	      </template>
         <!-- 搜索按钮 -->
         <el-button type="primary"
				icon="el-icon-search"
				@click="onSearchButtonClick"
				plain>
         </el-button>
         <!-- 添加按钮 -->
         <el-button type="primary"
            v-has="'add'"	
				@click="addStu"
				:disabled="disabled">
            添加项目
         </el-button>
      </div>

      <!-- 班级选择 -->
      <div class="class-select">
         <el-form>
				<el-form-item label="选择班级:">
					<el-select v-model="classes"
						filterable
						@visible-change="classVisible"
						@change="classChange"
						placeholder="请选择">
						<el-option v-loading="selectLoading"
							label="全部"
							value="all">
                  </el-option>
						<el-option :label="item"
							:value="item"
							v-for="(item, index) in classList"
							:key="index">
                  </el-option>
					</el-select>
				</el-form-item>
			</el-form>
      </div>

      <!-- 导出 -->
      <div class="exportExcel">
			<el-button icon="iconfont icon-excel-"
				@click="exportExcel">导出excel数据
         </el-button>
		</div>

      <!-- 学员表格 -->
      <div class="stuTable">
         <el-table :data="stuData" v-loading="loading" border style="width: 100%">
            <el-table-column prop="headimgurl" label="头像" align="center" width="80"> 
               <!-- 插槽 -->
               <template v-slot="scope">
						<el-avatar shape="square"
							:size="50"
							fit="fill"
							:src="scope.row.headimgurl">
                  </el-avatar>
					</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center" width="80"> </el-table-column>
            <el-table-column prop="degree" label="学历" align="center" width="80"> </el-table-column>
            <el-table-column prop="class" label="班级" align="center" width="80"> </el-table-column>
            <el-table-column prop="productUrl" label="项目" align="center" width="80"> </el-table-column>
            <el-table-column prop="cTime" label="创作时间" align="center"> </el-table-column>
            <el-table-column label="操作" align="center">
               <template v-slot="{ row }">
						<el-button type="primary"
							class="btn"
							icon="el-icon-view"
							@click="showStu(row)"
                     v-has="'read'"
							>查看</el-button>
						<el-button type="primary"
							class="btn"
							icon="el-icon-edit"
							@click="editStu(row)"
                     v-has="'edit'"
							>编辑</el-button>
						<el-button type="danger"							
							class="btn"
							icon="el-icon-delete"
                     v-has="'delete'"
							@click="deleteStu(row)">删除</el-button>
			      </template>
            </el-table-column>
         </el-table>
      </div>

      <!-- 分页器 -->
      <div class="pagination">
         <el-pagination background
            hide-on-single-page
            layout="prev,pager,next"
            :current-page.sync="currentPage"
            @current-change="changePage"
            :page-size="stuPageSize"
            :total="stuTotal">         
         </el-pagination>        
      </div>

      <!-- dialog弹出框 -->
      <qf-dialog></qf-dialog>
  
   </div> 
</template>
<script>
   import * as api from "../../../../api";
   import {mapState,mapActions,mapMutations} from "vuex";
   import dialog from "../../../../components/Dialog";
   import qee from "qf-export-excel";//导出excel方法
   export default {
      components:{
         'qf-dialog':dialog
      },
      computed:{
         ...mapState(['stuData',"loading","stuTotal","stuPageSize"]),
      },
      data(){
         return{
            classList:[], //班级列表
            classes:"", //下拉框绑定的班级
            disabled:false,
            selectLoading:true,//下拉框出现 ‘全部’字段加载动画
            searchList:[],//搜索框列表
            searchValue:'',
            blurSearchValue:"",
            list:[],
            currentPage:1,


            
         }
      },
      created() {
         this.GET_STULIST() //获取学员列表数据
      },
      methods: {
         ...mapActions(['GET_STULIST']),
         ...mapMutations(['SHOW_DIALOG',"CHANGE_DIALOG_TITLE","SET_CURRENT_ROW","SET_STU_DATA"]),         
         //搜索框选中值发生变化
         searchTextChange(searchText){
            // console.log(searchText);
            // 发送请求，更新列表
            api.searchStuApi(null,null,searchText)
            .then(res=>{
               this.currentPage = 1
               this.SET_STU_DATA(res.data) //vuex中更新表格数据的方法
            })

         },
         // 分页器页码发生改变的时候触发的事件
         changePage(page){
            // console.log(page);
            // 判断搜索框是否有值，如果有就展示搜索结果的分页
            if(this.searchValue){
               api.searchStuApi(page,this.searchValue,null)
               .then(res=>{
                  this.SET_STU_DATA(res.data)
               })

            }else{
               // 页码更改，传给后台，重新获取数据
               this.GET_STULIST({page})

            }
            

         },
         // 清空输入框内容，显示表格所有内容
         clear(){
            this.currentPage = 1

         },
         // 搜索按钮
         onSearchButtonClick(){
            // 点击搜索按钮
            api.searchStuApi(null,this.searchValue,null)
            .then(res=>{
               this.SET_STU_DATA(res.data)
            })



         },
         // 增加学员
         addStu(){
            // 修改标题
            this.CHANGE_DIALOG_TITLE("增加学员信息")
            //显示dialog
            this.SHOW_DIALOG()
            
         },
         remoteMethod(query){
            //搜索框输入值，键盘弹起后获取输入值
            console.log(query);
            this.searchValue = query
            // 向后台发起请求
            api.searchStuApi(null,null,query)
            .then(res=>{
               // console.log(res);
               // console.log(res.data.data);
               // 数组去重
               let norepeat = [];
               for(let i = 0;i < res.data.data.length;i++){
                  let flag = true
                  for(let k = 0;k < norepeat.length;k++){
                     if(norepeat[k].name===res.data.data[i].name){
                        flag = false
                        break;
                     }
                  }
                  if(flag){
                     norepeat.push(res.data.data[i])
                  }
               }
               this.searchList = norepeat
            })

         },
         // 班级选择框展开 收起
         classVisible(isVisible){
            // 下拉框展开的时候 加载动画打开
            this.selectLoading = true
            // console.log(isVisible);
            if(isVisible){//下拉框出现
               // 发送请求，获取班级列表
               api.getClassesApi()
               .then(res=>{
                  // console.log(res);
                  this.classList = res.data.data
                  this.selectLoading = false
               })


            }


         },
         //班级选择
         classChange(query){
            // query就是选中的班级
            // console.log(query);
            // 1.select展开的时候 展示所有的班级列表
            // 2.选中班级列表的时候 更新表格

            // 当query为all的时候 展示所有班级
            // 将query重新赋值为空 因为不传的话 后台就默认返回所有数据
            if(query==="all"){
               query = ""  
            }
            // 调用GET_STULIST,传递班级
            this.GET_STULIST({classes:query})


         },
         // 导出excel
         exportExcel(){
            let titleList = [
               {
                  title:"头像地址",
                  key:"headimgurl"
               },
               {
                  title:"姓名",
                  key:"name"
               },
               {
                  title:"学历",
                  key:"degree"
               },
               {
                  title:"班级",
                  key:""
               },
               {
                  title:"项目地址",
                  key:"productUrl"
               },
               {
                  title:"创建时间",
                  key:"cTime"
               }
            ]
            qee(titleList,this.stuData,"2111班级信息")

         },
         // 查看学员信息
         showStu(row){
            this.SET_CURRENT_ROW(row)
            this.$router.push({path:"/studentmanger/profile"})

         },
         // 编辑学员信息
         editStu(row){
            // 修改标题
            this.CHANGE_DIALOG_TITLE("编辑学员信息")
            // 显示dialog
            this.SHOW_DIALOG()
            console.log(row);
            //将当前这些数据回显到dialog框中 通过vuex修改currentRow的值
            this.SET_CURRENT_ROW(row)

         },
         // 删除学员信息
         deleteStu(row){
            // console.log(row);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
               api.delStuApi(row.sId)
               .then(res=>{
                  if(res.data.state){
                     this.GET_STULIST() //更新列表
                     this.$message({
                     type: 'success',
                     message: '删除成功!'
                    });

                  }else{//删除失败
                    this.$message.error("删除失败,数据不存在")

                  }
               })
              
            })
            .catch(() => {
              this.$message({
              type: 'warning',
              message: '已取消删除'
              });          
            });

         }


      },
      
   }
</script>
<style scoped lang="less">
   .search{
      text-align:left;
      padding-top:50px;
      /deep/ .el-input__inner{
         width:300px;
      }
   }
   .class-select{
      text-align:left;
      padding-top:30px;
   }
   .exportExcel{
      text-align:right;
      .el-button{
         height:40px;
         /deep/ .icon-excel-:before{
            color:green;
         }
      }
   }
   .stuTable{
      padding-top:20px;
   }
</style>